<template>
<div class="product-list">
  <!-- <c-header :title="'商品列表'" back-url="home"></c-header> -->
  <div class="van-nav-bar van-hairline--top-bottom" style="z-index: 1;">
    <div class="van-nav-bar__left" @click="back">
      <i class="van-icon van-nav-bar__arrow van-icon-arrow"></i>
      <span class="van-nav-bar__text"></span>
    </div>
    <div class="van-cell-group van-hairline--top-bottom product-search" @click="$router.push({path:'/search'})">
      <div class="van-cell van-hairline ">
        <div class="van-cell__title">
          <i class="van-icon van-icon-search"></i>
        </div>
        <div class="van-cell__value van-cell__value--alone">
          <span>{{searchKey | searchKeyFilter}}</span>
        </div>
      </div>
    </div>
    <div class="van-nav-bar__right" @click="chageShowType">
      <i class="van-icon" :class="[showRow?'van-icon-wap-nav':'van-icon-qr']"></i>
    </div>
  </div>
  <van-tabs :active="active" sticky @click="handleTabClick">
    <van-tab v-for="(t, index) in tabs" :title="t" :key="index">
    </van-tab>
    <product-list-row :proList="searchProList" v-show="showRow"></product-list-row>
    <product-list-square :proList="searchProList" v-show="!showRow" :show-title="false"></product-list-square>
  </van-tabs>
</div>
</template>
<script>
import {
  mapGetters,
  mapActions
} from 'vuex'
export default {
  data() {
    return {
      active: 0,
      tabs: ['人气', '销量↓↑', '价格↓↑'],
      orderBy: 'asc',
      dir: '',
      proName: '',
      showRow: true, // 默认横向显示商品
      searchKey: this.$route.query.searchKey // 搜索关键字
    }
  },
  computed: {
    ...mapGetters([
      'searchProList'
    ])
  },
  created() {
    console.log(this.searchKey);
    this.getSearchPro({
      keyword: this.searchKey,
      dir: '',
      orderBy: ''
    })
  },
  methods: {
    ...mapActions([
      'getSearchPro'
    ]),
    // 返回上一层
    back() {
      this.$router.push({
        path: '/home'
      })
    },
    handleTabClick(index) {
      if (index == 1) {
        // 按销量排序
        if (this.orderBy == 'asc') {
          this.tabs = ['人气', '销量↑', '价格↓↑']
        } else if (this.orderBy == 'desc') {
          this.tabs = ['人气', '销量↓', '价格↓↑']
        } else {
          this.tabs = ['人气', '销量↓↑', '价格↓↑']
        }
      } else if (index == 2) {
        // 按价格排序
        if (this.orderBy == 'asc') {
          this.tabs = ['人气', '销量↓↑', '价格↓']
        } else if (this.orderBy == 'desc') {
          this.tabs = ['人气', '销量↓↑', '价格↑']
        } else {
          this.tabs = ['人气', '销量↓↑', '价格↓↑']
        }
      }else{
        this.tabs = ['人气', '销量↓↑', '价格↓↑']
      }
      this.orderBy = this.orderBy == 'asc' ? 'desc' : 'asc'
      this.dir = index == '1' ? 'buys' : 'cash'
      this.getSearchPro({
        keyword: this.searchKey,
        orderBy: this.orderBy,
        dir: this.dir
      })
    },

    getPro() {
      this.searchKey = this.$route.query.searchKey
      this.getSearchPro({
        keyword: this.searchKey,
        dir: '',
        orderBy: ''
      })
    },
    // 切换显示的方式
    chageShowType() {
      this.showRow = !this.showRow
    }
  },
  watch: {
    "$route": 'getPro'
  },
  filters: {
    searchKeyFilter(val) {
      if (val) {
        return val
      } else {
        return '请输入需要查询的商品名称'
      };

    }
  }
}
</script>
<style lang="scss">
@import '../../assets/styles/common.scss';
.product-list {
    background-color: #f2f2f2;
    .product-search {
        // height: px2rem(40px);
        width: 70%;
        margin: 0 15%;
        padding-top: px2rem(10px);
    }
    .van-hairline--top-bottom::after {
        border-width: 0;
    }
    .van-cell {
        height: px2rem(55px);
        // line-height: px2rem(50px);
        padding: 0 15px;
        background-color: #c1c0c0;
        border-radius: px2rem(50px);
        color: #fff;
        display: flex;
        flex-direction: row;
        -webkit-align-items: center;
        align-content: center;
        .van-icon {
            // margin-right: 0;
            color: #fff;
        }
    }
    .van-icon-search {
        font-size: 12px;
    }
    .van-cell__value--alone {
        // line-height: px2rem(60px);
        font-size: 12px;
    }
    .van-tabs {
        border-top: 1px solid #f2f2f2;
    }
    .van-tabs__wrap {
        border-bottom: 1px solid #f2f2f2;
    }
}
</style>
